import { LikeOutlined, MessageOutlined, StarOutlined } from "@ant-design/icons";
import { ProCard } from "@ant-design/pro-components";
import { Avatar, List, Space } from "antd";

import React from "react";

const Page25: React.FC = () => {
  const listData = Array.from({ length: 5 }).map((_, i) => ({
    href: "https://ant.design",
    title: `文章标题 ${i + 1}`,
    avatar: "https://joeschmoe.io/api/v1/random",
    description: "这是一段文章描述，介绍了文章的主要内容...",
    content: "这是一段文章内容，包含了详细的说明和解释...",
  }));

  const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
    <Space>
      {React.createElement(icon)}
      {text}
    </Space>
  );

  return (
    <div style={{ padding: 24 }}>
      <h1>文章列表页面</h1>
      <ProCard>
        <List
          itemLayout="vertical"
          size="large"
          pagination={{
            onChange: (page) => {
              console.log(page);
            },
            pageSize: 3,
          }}
          dataSource={listData}
          renderItem={(item) => (
            <List.Item
              key={item.title}
              actions={[
                <IconText
                  icon={StarOutlined}
                  text="156"
                  key="list-vertical-star-o"
                />,
                <IconText
                  icon={LikeOutlined}
                  text="156"
                  key="list-vertical-like-o"
                />,
                <IconText
                  icon={MessageOutlined}
                  text="2"
                  key="list-vertical-message"
                />,
              ]}
              extra={
                <img
                  width={272}
                  alt="logo"
                  src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<a href={item.href}>{item.title}</a>}
                description={item.description}
              />
              {item.content}
            </List.Item>
          )}
        />
      </ProCard>
    </div>
  );
};

export default Page25;
